<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form :model="form" label-position="left" label-width="70px">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="建筑群">
              <FilterSelect2
                    v-model="form.buildingId"
                    :optionlist="qiyelist"
                    @updateModelValue="changeqiye"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="用能类型">
              <el-select size="small" v-model="form.energyType" style="width: 100%;">
                <el-option v-for="(item,index) in yomgnenglist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="用户">
              <FilterSelect2
                    v-model="form.customerId"
                    :optionlist="yonghulist"
                    :valuekey="{ name: 'customerName', value: 'id' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="房间">
              <FilterSelect2
                    v-model="form.roomId"
                    :optionlist="fangjianlist"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right;">
            <el-form-item>
              <el-button @click="chongzhi" size="small">重 置</el-button>
              <el-button @click="getjuzhenlist()" type="primary" size="small">查 询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="title">
          <div class="little" @click="typeclick('01')">
           <span :style="{'background-color':showzc?'#3dcc6d':'#cccccc'}" class="span green"></span>正常
          </div>
          <div class="little" @click="typeclick('02')">
            <span :style="{'background-color':showgj?'#e3b11b':'#cccccc'}" class="span gaojing"></span>告警
          </div>
          <div class="little" @click="typeclick('03')">
            <span :style="{'background-color':showqf?'#ff6666':'#cccccc'}" class="span qianfei"></span>欠费
          </div>
          <div class="little" @click="typeclick('04')">
            <span :style="{'background-color':showwkh?'#646464':'#cccccc'}" class="span weikaihu"></span>未开户
          </div>
      </div>
      <div class="xunhuanlist">
        <!-- 正常用户 -->
        <div class="xiaohezi zhangchang" v-for="(item,index) in zhenglist" :key="index" v-if="shouldShowItem(item)"
         :style="{'background-color':item.type=='01'?'#daf2e2':item.type=='02'?'#f2e9ce':item.type=='03'?'#ffd9d9':'#f1f1f1'}">
          <div class="top">
            <transition name="el-fade-in" mode="out-in">
              <div v-if="!item.show" class="meter">{{ item.meterNames }}</div>
              <div class="bbbbbox" key="text" v-else>
                <div class="titles" :style="{'color':item.type=='01'?'#3dcc6d':item.type=='02'?'#e3b11b':item.type=='03'?'#ff6666':'#646464'}">
                  <span>{{ item.customerName }}</span>
                  <span>{{ item.type=='01'?'正常':item.type=='02'?'告警':item.type=='03'?'欠费':'未开户' }}</span>
                </div>
                <div class="icons">
                  <div class="img">
                    <i class="iconfont icon-yonghuguanli"
                    :style="{'color':item.type=='01'?'#3dcc6d':item.type=='02'?'#e3b11b':item.type=='03'?'#ff6666':'#646464'}"
                    ></i>
                  </div>
                  <div class="textbox">
                    <div>{{ item.roomName }}</div>
                    <div style="margin: 10px 0;">余额(元): {{ item.balance }}</div>
                    <div>{{ item.contactPhone }}</div>
                  </div>
                </div>
              </div>
            </transition>
            <div class="xiangqing" key="bianji">
                <span @click="toggleRotation(item)" class="click">
                  <span>表计详情</span>
                  <i class="el-icon-arrow-up" :style="{transform: rotateStyle(item)}"></i>
                </span>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getjuzhenlistapi} from '@/api/prwpaid/summarize/overview'
import {getlistapi} from '@/api/prwpaid/file-management/room'
import { getzidianxialaapi } from '@/api/guidelines'
import {gettablelistapi} from '@/api/prwpaid/user-manage/OpenAaccount'
import { getloginlistapi } from '@/api/prwpaid/file-management/Architectural-complex'
export default {
  name: 'CallPoliceIndex',

  data() {
    return {
      form:{buildingId:'',energyType:'',customerId:'',roomId:'',type:''},
      qiyelist:[],
      yomgnenglist:[],
      zhenglist: [],
      yonghulist: [],
      fangjianlist:[],
      showzc:true,
      showgj:true,
      showqf:true,
      showwkh:true,
      originalList: [], // 保存原始数组数据
      filterTypes: []
    };
  },

  async mounted() {

    // 获取用能类型
    const yonghu = await getzidianxialaapi({ dictType: 'MBM_ENERGY_TYPE' })
    this.yomgnenglist = yonghu.data.list
    // 获取建筑群
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
    if(isBuildIdInArray){
      this.form.buildingId = localbuildingId ? localbuildingId : ''
      this.getyonghuxialalist(this.form.buildingId)
    }else{
      this.form.buildingId=''
    }
    // 获取房间
    const room = await getlistapi({
      pageNo: 0,
      pageSize: 500,
      buildingId:''
    })
    this.fangjianlist = room.data.list
    this.getjuzhenlist()
  },

  methods: {
    // 企业下拉
   async changeqiye(val) {
      localStorage.setItem('buildingId', val)
      this.getyonghuxialalist(val)
    },
    // 获取用户
    async getyonghuxialalist(val) {
    const ress = await gettablelistapi({
        pageNo: 0, pageSize: 500,
      startDate: '', endDate: '', 
      state:'20',buildingId:val,customerType:''
    })
    this.yonghulist = ress.data.list
    },
    // 获取运维矩阵数据
    async getjuzhenlist() {
      // loading效果开启
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        target: document.querySelector('.xunhuanlist')
      });
      const { data: { list } } = await getjuzhenlistapi({ ...this.form })
      // 加入show字段控制显示隐藏
      list.forEach(ele => ele['show'] = true)
      // 将数组按type值排序
      list.sort((a, b) => {
          return a.type.localeCompare(b.type);
      });
      // 去除表计信息最后一个逗号
      list.forEach(ele => {
        console.log(ele);
        let lastIndex = ele.meterNames.lastIndexOf(',');
        if (lastIndex !== -1) {
          ele.meterNames = ele.meterNames.substring(0, lastIndex) + ele.meterNames.substring(lastIndex + 1);
        }
      })
      this.zhenglist = list
      loading.close();
    },
    // 类型过滤
    typeclick(val){
      if (this.filterTypes.includes(val)) {
        this.filterTypes = this.filterTypes.filter(item => item !== val);
      } else {
        this.filterTypes.push(val);
      }
      if(val=='01'){
        this.showzc=!this.showzc
      }else if(val=='02'){
        this.showgj=!this.showgj
      }else if(val=='03'){
        this.showqf=!this.showqf
      }else if(val=='04'){
        this.showwkh=!this.showwkh
      }
    },
    shouldShowItem(item) {
      if (this.filterTypes.length === 0) {
        return true;
      } else {
        return !this.filterTypes.includes(item.type);
      }
    },
    // 重置
    chongzhi() {
      localStorage.removeItem('buildingId');
      this.form = { buildingId: '', energyType: '', customerId: '', roomId: '', type: '' }
      this.getjuzhenlist()
    },
    toggleRotation(item) {
      item.show = !item.show;
    },
    rotateStyle(item) {
      return item.show ? 'rotate(180deg)' : 'rotate(0deg)';
    },
  },
};
</script>

<style scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  padding: 10px;
  height: 100%;
  .topbox{
    height: 80px;
    background-color: #fff;
    margin-bottom: 10px;
    padding: 20px
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .title{
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;
      .little{
        margin-left: 40px;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        .span{
          margin-right: 10px;
          display: inline-block;
          width: 20px;
          height: 14px;
          border-radius: 3px;
        }
      }
    }
    .xunhuanlist{

      height: 90%;
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 10px;
      grid-auto-rows: 140px; /* 设置每行的高度为100px */
      align-content: start; /* 调整行之间的对齐方式 */
      overflow-y: auto; /* 当内容过多时显示滚动条 */
      .xiaohezi{
        border-radius: 10px;
        /* height:160px; */
        .top{
          height: 140px;
          position: relative;
          padding: 15px 10px;
          .meter{
            color: #646464;
          }
          .bbbbbox{
            .icon-yonghuguanli{
              font-size: 40px
            }
            .titles{
              display: flex;
              justify-content: space-between;
              font-weight: bold;
              height: 20px;
              margin-bottom: 10px;
            }
            .icons{
              display: flex;
              height: 80px;
              .img{
                line-height: 80px;
                margin-right: 10px;
              }
              .textbox{
                div{
                  height: 20px;
                  color: #646464;
                }
              }
            }
          }
          .xiangqing{
            position: absolute;
            bottom: 15px;
            right: 10px;
            color: #187cf5;
            cursor: pointer;
          }
        }
        .isshow{
          color: #646464;
        }
        .footer{
          text-align: center;
          color: #187CF5;
          height: 35px;
          line-height: 35px;
          .click{
            cursor: pointer;
          }
        }
      }
      .zhangchang{
        background-color: #daf2e2;
        .colorzhang{
          color: #3dcc6d;
        }
      }
    }
  }
}
i {
  transition: transform 0.5s ease;
  margin-left: 5px;
}

/* .el-zoom-in-center-enter,
  .el-zoom-in-center-leave-to {
    opacity: 0;
    transform: translateX(-30px);
  }

  .el-zoom-in-center-enter-active {
    transition: all 0.3s;
  }

  .el-zoom-in-center-enter-to {
    opacity: 1;
  }
  .el-zoom-in-center-leave-active {
    transition: all 0.3s;
  } */
</style>